<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no">
    <title>购物车</title>
    <link rel="stylesheet" type="text/css" href="/js/points/css/base.css"/>
    <link rel="stylesheet" type="text/css" href="/js/points/ss/shopcar.css"/>
    <link rel="stylesheet" type="text/css" href="/js/points/css/mui.min.css"/>
    <link rel="stylesheet" type="text/css" href="/js/points/css/loaders.min.css"/>
    <link rel="stylesheet" type="text/css" href="/js/points/css/loading.css"/>
    <link rel="stylesheet" type="text/css" href="/js/points/sourse/layer/mobile/need/layer.css">
    <script src="/js/points/js/rem.js"></script>
    <script src="/js/points/js/jquery.min.js" type="text/javascript"></script>
    <script src="/js/points/sourse/layer/mobile/layer.js"></script>
	<script type="text/javascript">
		$(window).load(function(){
			$(".loading").addClass("loader-chanage")
			$(".loading").fadeOut(300)
		})
	</script>
</head>
<!--loading页开始-->
<div class="loading">
	<div class="loader">
        <div class="loader-inner pacman">
          <div></div>
          <div></div>
          <div></div>
          <div></div>
          <div></div>
        </div>
	</div>
</div>
<!--loading页结束-->
	<body>
		<!--header star-->
		<header class="mui-bar mui-bar-nav" id="header">
			<a class="btn" href="javascript:history.go(-1)">
	            <i class="iconfont icon-fanhui"></i>
	        </a>
	        <h4>购物车</h4>
	    </header>
	    <!--header end-->
	    
	    <div class="warp warptwo clearfloat">
	    	<div class="shopcar clearfloat">
	    		<div class="list clearfloat fl">
	    			<div class="xuan clearfloat fl">
	    				<div class="radio" > 
						    <label>
						        <input type="checkbox" name="sex" value="" />
						    </label>
						</div>
	    			</div>
	    			<a href="javascript:void(0)">
		    			<div class="tu clearfloat fl">
		    				<span></span>
		    				<img src="images/xj.jpg"/>
		    			</div>
		    			<div class="right clearfloat fl">
		    				<p class="tit over">单反相机，彰显你的风格</p>
		    				<p class="fu-tit over">颜色：蓝色  内存：120G</p>
		    				<p class="jifen over">100000积分</p>
		    				<div class="bottom clearfloat">
		    					<div class="zuo clearfloat fl">
		    						<ul>
		    							<li><img src="images/jian.jpg"/></li>
		    							<li>1</li>
		    							<li><img src="images/jia.jpg"/></li>
		    						</ul>
		    					</div>
		    					<i class="iconfont icon-lajixiang fr"></i>
		    				</div>
		    			</div>
	    			</a>
	    		</div>
	    		<div class="list clearfloat fl">
	    			<div class="xuan clearfloat fl">
	    				<div class="radio" > 
						    <label>
						        <input type="checkbox" name="sex" value="" />
						    </label>
						</div>
	    			</div>
	    			<a href="javascript:void(0)">
		    			<div class="tu clearfloat fl">
		    				<span></span>
		    				<img src="/upload/shuibei.jpeg"/>
		    			</div>
		    			<div class="right clearfloat fl">
		    				<p class="tit over">迪士尼304不锈钢合家欢隔热杯大容量办公杯马克水杯DSM-1361</p>
		    				<p class="fu-tit over">颜色：随机  容量：500mL</p>
		    				<p class="jifen over">100000积分</p>
		    				<div class="bottom clearfloat">
		    					<div class="zuo clearfloat fl">
		    						<ul>
		    							<li><img src="images/jian.jpg"/></li>
		    							<li>1</li>
		    							<li><img src="images/jia.jpg"/></li>
		    						</ul>
		    					</div>
		    					<i class="iconfont icon-lajixiang fr"></i>
		    				</div>
		    			</div>
	    			</a>
	    		</div>
	    		<div class="list clearfloat fl">
	    			<div class="xuan clearfloat fl">
	    				<div class="radio" > 
						    <label>
						        <input type="checkbox" name="sex" value="" />
						    </label>
						</div>
	    			</div>
	    			<a href="javascript:void(0)">
		    			<div class="tu clearfloat fl">
		    				<span></span>
		    				<img src="/upload/canju1.jpeg"/>
		    			</div>
		    			<div class="right clearfloat fl">
		    				<p class="tit over">铂美思创意米奇餐盘小麦秸秆饭碗餐具小勺筷子套装颜色随机</p>
		    				<p class="fu-tit over">颜色：随机</p>
		    				<p class="jifen over">2760积分</p>
		    				<div class="bottom clearfloat">
		    					<div class="zuo clearfloat fl">
		    						<ul>
		    							<li><img src="images/jian.jpg"/></li>
		    							<li>1</li>
		    							<li><img src="images/jia.jpg"/></li>
		    						</ul>
		    					</div>
		    					<i class="iconfont icon-lajixiang fr"></i>
		    				</div>
		    			</div>
	    			</a>
	    		</div>
	    		<div class="list clearfloat fl">
	    			<div class="xuan clearfloat fl">
	    				<div class="radio" >
						    <label>
						        <input type="checkbox" name="sex" value="" />
						    </label>
						</div>
	    			</div>
	    			<a href="javascript:void(0)">
		    			<div class="tu clearfloat fl">
		    				<span></span>
		    				<img src="/upload/chongdianxian.jpeg"/>
		    			</div>
		    			<div class="right clearfloat fl">
		    				<p class="tit over">品胜（PISEN）锌合金Type-C数据充电线1000mm</p>
		    				<p class="fu-tit over">颜色：随机 快充</p>
		    				<p class="jifen over">3480积分</p>
		    				<div class="bottom clearfloat">
		    					<div class="zuo clearfloat fl">
		    						<ul>
		    							<li><img src="images/jian.jpg"/></li>
		    							<li>1</li>
		    							<li><img src="images/jia.jpg"/></li>
		    						</ul>
		    					</div>
		    					<i class="iconfont icon-lajixiang fr"></i>
		    				</div>
		    			</div>
	    			</a>
	    		</div>
	    		<div class="list clearfloat fl">
	    			<div class="xuan clearfloat fl">
	    				<div class="radio" > 
						    <label>
						        <input type="checkbox" name="sex" value="" />
						    </label>
						</div>
	    			</div>
	    			<a href="javascript:void(0)">
		    			<div class="tu clearfloat fl">
		    				<span></span>
		    				<img src="/upload/mianjin.jpeg"/>
		    			</div>
		    			<div class="right clearfloat fl">
		    				<p class="tit over">Runjoy朗悦印花车载面巾纸</p>
		    				<p class="fu-tit over">6桶装</p>
		    				<p class="jifen over">3960积分</p>
		    				<div class="bottom clearfloat">
		    					<div class="zuo clearfloat fl">
		    						<ul>
		    							<li><img src="images/jian.jpg"/></li>
		    							<li>1</li>
		    							<li><img src="images/jia.jpg"/></li>
		    						</ul>
		    					</div>
		    					<i class="iconfont icon-lajixiang fr"></i>
		    				</div>
		    			</div>
	    			</a>
	    		</div>
	    	</div>
	    </div>
	    
	    <!--settlement star-->
	    <div class="settlement clearfloat">
	    	<div class="zuo clearfloat fl box-s">
	    		合计：<span></span>
	    	</div>
	    	<a href="confirm.html" class="fl db">
	    		立即结算
	    	</a>
	    </div>
	    <!--settlement end-->
	    
		<!--footer star-->
	    <footer class="page-footer fixed-footer" id="footer">
			<ul>
				<li>
					<a href="index.html">
						<i class="iconfont icon-shouye"></i>
						<p>首页</p>
					</a>
				</li>
				<li>
					<a href="cation.html">
						<i class="iconfont icon-icon04"></i>
						<p>分类</p>
					</a>
				</li>
				<li class="active">
					<a href="shopcar.html">
						<i class="iconfont icon-gouwuche"></i>
						<p>购物车</p>
					</a>
				</li>
				<li>
					<a href="center.html">
						<i class="iconfont icon-yonghuming"></i>
						<p>我的</p>
					</a>
				</li>
			</ul>
		</footer>
		<!--footer end-->

		<script type="text/javascript">
			$('input[type="checkbox"]').click(function() { // 找到勾选按钮，绑定事件
				tatol();
			});
			$('.list ul img').click(function() { // 找到加减按钮，绑定点击事件
				var val = $(this).parent().parent().children().eq(1);
				if ($(this).parent().index()) {
					val.html(parseInt(val.html()) + 1);
				} else {
					val.html(val.html() > 1 ? parseInt(val.html()) - 1 : 1);
				}
				tatol();
			});
			$('.icon-lajixiang').click(function() { // 找到删除按钮，绑定点击事件
				var self = this;
				layer.open({
	                content: '确定删除？',
	                btn: ['确定', '取消'],
	                yes: function(index) {
	                    $(self).parent().parent().parent().parent().remove();
	                    layer.closeAll();
	                    tatol();
	                }
	            });
			});
			var tatol = function() { // 计算总积分
				var count = 0;
				$('.list').map(function(index, item) {
					var $el = $(item);
					if ($el.find('input[type="checkbox"]').is(":checked")) {
						count += parseFloat($el.find('.jifen').html()) * parseInt($el.find('.zuo li').eq(1).html());
					}
				});
				if (count > 0) {
					$('.settlement span').html(count + '积分');
				}
			}
		</script>
		
	</body>

</html>
